<script lang="ts" setup>
import { onMounted } from 'vue'

import { imagePath, maskStyle } from '@/libs/file-utils'
import { userInfo } from '@/libs/user'
import { mbti, stars, dailyWords, resultTime, luckyList, fortuneList, showHomeMenu } from './data'
import { updateData, toLuckyDetail } from './data'
import { editFriend } from '@/pages/community/friend/list/data'
import { needsId } from '../../data'

const card_bg = imagePath('main/home/card-bg.png')
const icon_invite = imagePath('main/home/invite.svg')
const character_1 = imagePath('main/home/character-1.png')
const character_2 = imagePath('main/home/character-2.png')
const img_star = imagePath('main/home/star.png')
const card_today = imagePath('main/home/card-today.png')
const card_word = imagePath('main/home/card-word.png')
const card_friend = imagePath('main/home/card-friend.png')
const icon_arrow = imagePath('icon-arrow.svg')

const menuList = [
  {
    name: '邀请好友添加档案',
    key: 'invite',
    icon: imagePath('main/home/menu-share.png')
  },
  {
    name: '邀请好友合盘',
    key: 'share',
    icon: imagePath('main/home/menu-invite.png')
  },
  {
    name: '添加档案',
    key: 'add',
    icon: imagePath('main/home/menu-add.png')
  },
]

const toMBTI = () => {
  if (resultTime.value > 0) return

  uni.navigateTo({ url: mbti.value?.fullType ? ('/pages/quiz/mbti/result/index?typeCode=' + mbti.value.typeCode) : '/pages/quiz/mbti/choose/index' })
}
const toMore = () => uni.navigateTo({ url: '/pages/quiz/fortune/result/index' })
const toFriend = () => uni.navigateTo({ url: '/pages/community/friend/invite/index' })

const clickMenu = (item: any) => {
  showHomeMenu.value = false

  item.key === 'add' && editFriend()
}

onMounted(updateData)
</script>

<template>
  <!-- <div class="nickname">{{ userInfo?.nickname || '蒜蒜' }}</div> -->

  <div
    class="card"
    :style="{ backgroundImage: card_bg }"
  >
    <div
      class="menu"
      @click.stop="showHomeMenu = !showHomeMenu"
    >
      <div
        class="icon"
        :style="{ backgroundImage: icon_invite }"
      ></div>
      邀请

      <div
        class="list"
        :class="{ show: showHomeMenu }"
      >
        <div
          v-for="(item, idx) in menuList"
          :key="idx"
          class="item"
          @click.stop="clickMenu(item)"
        >
          <div
            class="img"
            :style="{ backgroundImage: item.icon }"
          ></div>
          {{ item.name }}

          <!-- #ifdef MP -->
          <button
            v-if="item.key !== 'add'"
            class="invite"
            open-type="share"
            @click="needsId = item.key === 'invite'"
          ></button>
          <!-- #endif -->
        </div>
      </div>
    </div>

    <div
      class="character"
      :style="{ backgroundImage: userInfo?.gender === 2 ? character_2 : character_1 }"
    ></div>

    <div class="mbti-box">
      <div class="birth">{{ (userInfo?.birthday ? (userInfo?.zodiacSign + '.' + userInfo?.birthday) :
        '请完善您的个人信息')
      }}</div>

      <div class="mbti">{{ mbti?.fullType ? (mbti.fullType + ' ' + mbti?.archetype) : '(未显示MBTI状态)' }}</div>
      <div
        class="test"
        @click="toMBTI"
      >
        {{ resultTime > 0 ? ('测试报告生成倒计时 ' + resultTime + 's') : mbti?.fullType ? '测试报告已生成' : '前往完整版测试' }}

        <div
          class="arrow"
          :style="maskStyle(icon_arrow)"
        ></div>
      </div>
    </div>

    <div class="divider"></div>

    <div class="today-title">
      <div class="left">
        <div class="title">今日运势小甜饼</div>
        <div
          v-for="index in stars"
          :key="index"
          class="star"
          :style="{ backgroundImage: img_star }"
        ></div>
      </div>

      <div
        class="more"
        @click="toMore"
      >查看</div>
    </div>

    <div
      class="today-card"
      :style="{ backgroundImage: card_today }"
    >
      <div class="box">
        <div
          v-for="(item, idx) in luckyList"
          :key="idx"
          class="lucky"
          @click.stop="toLuckyDetail(item)"
        >
          <div class="link l"></div>
          <div class="link r"></div>

          <div
            class="icon"
            :style="{ backgroundImage: item.icon }"
          ></div>
          <div class="content">
            <div class="val">{{ item.value }}</div>
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>

      <div class="divider"></div>

      <div class="fortune">
        <div
          v-for="(item, idx) in fortuneList"
          :key="idx"
          class="item"
        >
          <div
            class="icon"
            :style="{ backgroundImage: item.icon }"
          ></div>
          <div class="text">
            <div class="level">{{ item.level }}</div>
            <div>{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div
    class="words"
    :style="{ backgroundImage: card_word }"
  >
    <div class="bar">
      <div class="title">每日寄语</div>
      <div class="date">{{ dailyWords.date }}</div>
    </div>

    <div class="divider"></div>
    <text class="content">{{ dailyWords.content }}</text>
  </div>

  <div
    class="friend"
    :style="{ backgroundImage: card_friend }"
    @click="toFriend"
  ></div>
</template>

<style lang="less" scoped>
// .nickname {
//   margin-top: 20rpx;

//   color: #FFBD1E;
//   font-size: 80rpx;
//   line-height: 116rpx;
//   text-align: center;
// }

.card {
  position: relative;
  width: 717rpx;
  // height: 967rpx;

  margin-top: 110rpx;
  margin-left: 24rpx;

  box-sizing: border-box;
  padding: 60rpx 0 40rpx;

  .menu {
    position: absolute;
    top: -78rpx;
    left: 10rpx;

    padding: 4rpx 16rpx;

    display: flex;
    align-items: center;

    background-color: #FFAFD4;
    border-radius: 44rpx;

    color: #fff;
    font-size: 24rpx;

    .icon {
      width: 48rpx;
      height: 48rpx;

      margin-right: 10rpx;
    }

    .list {
      position: absolute;
      top: calc(100% + 10rpx);
      left: 0;

      width: 280rpx;

      padding: 10rpx 0;

      border-radius: 24rpx;
      background-color: #fff;
      box-shadow: 0 0 11rpx 0 rgba(0, 0, 0, .26);

      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;

      &.show {
        opacity: 1;
        pointer-events: all;
      }

      .item {
        position: relative;

        display: flex;
        align-items: center;

        box-sizing: border-box;
        padding: 15rpx 24rpx;

        color: #000;
        font-size: 24rpx;
        line-height: 32rpx;

        .img {
          width: 32rpx;
          height: 32rpx;

          margin-right: 8rpx;
        }

        .invite {
          position: absolute;
          top: 0;
          left: 0;

          width: 100%;
          height: 100%;

          opacity: 0;
        }
      }
    }
  }

  .character {
    position: absolute;
    right: 4rpx;
    top: -70rpx;

    width: 290rpx;
    height: 370rpx;
  }

  .mbti-box {
    margin-left: 30rpx;

    .birth {
      color: #FEEF19;
      text-shadow: 0 0 6rpx #821D63;
      font-size: 40rpx;
      line-height: 58rpx;
    }

    .mbti {
      margin: 12rpx 0;

      color: #E51D1D;
      font-size: 40rpx;
      line-height: 58rpx;
    }

    .test {
      height: 62rpx;

      display: inline-flex;
      align-items: center;

      padding: 0 30rpx;

      color: #fff;
      font-size: 28rpx;

      border-radius: 31rpx;
      background-color: #F590A4;
      box-shadow: -6rpx -6rpx 13rpx 0 rgba(240, 0, 216, .25) inset, 0 4rpx 5rpx 0 rgba(97, 15, 101, .28);

      .arrow {
        width: 32rpx;
        height: 32rpx;

        margin-left: 8rpx;

        background-color: #fff;
        mask-size: 100% 100%;
      }
    }
  }

  .divider {
    width: 650rpx;

    margin-top: 24rpx;
    margin-left: 24rpx;

    border-top: 2rpx dashed rgba(#DA62A7, .66);
  }

  .today-title {
    box-sizing: border-box;
    padding: 20rpx 60rpx 0 16rpx;

    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;
      align-items: flex-end;

      .title {
        margin: 0 16rpx;

        color: #FBC143;
        font-size: 32rpx;
        line-height: 46rpx;

        text-shadow: 0 0 4rpx #F427BA, 0 0 4rpx #F427BA, 0 0 4rpx #F427BA, 0 0 4rpx #F427BA, 0 0 10rpx #B04C8A;
      }

      .star {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .more {
      width: 154rpx;
      height: 62rpx;

      color: #fff;
      font-size: 28rpx;
      line-height: 62rpx;
      text-align: center;

      border-radius: 31rpx;
      background-color: #F590A4;
      box-shadow: -6rpx -6rpx 13rpx 0 rgba(240, 0, 216, .25) inset, 0 4rpx 5rpx 0 rgba(97, 15, 101, .28);
    }
  }

  .today-card {
    width: 640rpx;
    // height: 560rpx;

    margin-top: 8rpx;
    margin-left: 34rpx;

    box-sizing: border-box;
    padding: 50rpx 0 40rpx;

    .box {
      width: 546rpx;

      margin-left: 42rpx;

      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      row-gap: 40rpx;
      column-gap: 22rpx;

      .lucky {
        position: relative;

        border-radius: 8rpx;
        background-color: rgba(#fff, .42);
        box-shadow: 0 0 14rpx 0 rgba(217, 93, 164, .85) inset;

        box-sizing: border-box;
        padding: 10rpx;

        display: flex;
        align-items: center;
        justify-content: center;

        .link {
          position: absolute;
          top: -16rpx;

          width: 8rpx;
          height: 20rpx;

          border-radius: 4rpx;
          background-color: #FFE6DF;
          box-shadow: 0 -2rpx 0 0 #C45F90, 0 2rpx 0 0 #C45F90;

          &.l {
            left: 54rpx;
          }

          &.r {
            right: 54rpx;
          }
        }

        .icon {
          width: 56rpx;
          height: 56rpx;
        }

        .content {
          width: 150rpx;
          height: 100%;

          font-size: 30rpx;
          line-height: 46rpx;
          text-align: center;
          white-space: pre;

          display: flex;
          flex-direction: column;

          .val {
            flex: 1;

            color: #972A9A;
            font-size: 34rpx;

            display: flex;
            justify-content: center;
            align-items: center;
          }

          .name {
            color: #666;
          }
        }
      }
    }

    .divider {
      width: 568rpx;

      margin: 30rpx;

      border-top: 2rpx dashed rgba(#DA62A7, .34);
    }

    .fortune {
      margin-left: 20rpx;

      display: flex;

      .item {
        margin-right: 20rpx;

        display: flex;
        align-items: center;

        .icon {
          width: 72rpx;
          height: 72rpx;
        }

        .text {
          color: #666;
          text-align: center;
          font-size: 28rpx;
          line-height: 32rpx;

          .level {
            color: #000;
          }
        }
      }
    }
  }
}

.words {
  width: 712rpx;
  min-height: 336rpx;

  margin-left: 24rpx;

  box-sizing: border-box;
  padding: 60rpx 90rpx 60rpx 80rpx;

  .bar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      color: #513B73;
      font-size: 40rpx;
    }

    .date {
      color: #513B73;
      font-size: 24rpx;
    }
  }

  .divider {
    width: 100%;

    margin: 28rpx 0;

    border-top: 2rpx dashed rgba(#513B73, .34);
  }

  .content {
    color: #444;
    font-size: 28rpx;
    line-height: 36rpx;
  }
}

.friend {
  width: 712rpx;
  height: 380rpx;

  margin-left: 24rpx;
  margin-bottom: 50rpx;
}
</style>
